// import React, { useRef } from "react";

// function App() {
//   const container = useRef();

//   return (
//     <div ref={container}>
//       <button onClick={() => console.log(container.current)}>获取container</button>
//     </div>
//   );
// }

// export default App;

// 保存数据
import { useRef, useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);
  let timeId = useRef(); // 跨组件生命周期
  useEffect(() => {
    // 使用这个 ref 的 current 属性存储数据保证组件更新存储数据不会丢失
    timeId.current = setInterval(() => {
      setCount((count) => count + 1);
    }, 1000);
  }, []);

  const stopCount = () => {
    console.log(timeId.current);
    clearInterval(timeId.current);
  };

  const box = useRef();
  return (
    <div ref={box}>
      <span>{count}</span>
      <button onClick={() => stopCount()}> 停止 </button>
    </div>
  );
}
export default App;
